<template>

    <!-- 新打印     -->
    <div class="new-print-are" id="new-print-are">
      <div class="printare">
        <div class="linehead">货品上架单</div>
        <div class="zjll-body">
          <div class="row">
            <div class="leftclumons">客户名称:</div>
            <div class="midclumons">${item.khmc}</div>
          </div>
          <div class="row">
            <div class="leftclumons">车牌号/柜号:</div>
            <div class="midclumons">${i}</div>
          </div>
          <div class="row">
            <div class="leftclumons">品名:</div>
            <div class="midclumons">${item.wlmc}</div>
          </div>
          <div class="row">
            <div class="leftclumons">规格:</div>
            <div class="midclumons">${item.gg}</div>
          </div>
          <div class="row">
            <div class="leftclumons">批号/型号:</div>
            <div class="midclumons">${item.PCH}</div>
          </div>
          <div class="row">
            <div class="leftclumons">数量:</div>
            <div class="midclumons">${i >1 ? item.yushu : item.mtsl}</div>
          </div>
          <div class="row">
            <div class="leftclumons">操作员:</div>
            <div class="midclumons"></div>

          </div>
          <div class="row">
            <div class="leftclumons">生产日期:</div>
            <div class="midclumons">${item.SCRQ}</div>
          </div>
          <div class="row">
            <div class="leftclumons">物料名称:</div>
            <div class="midclumons">${item.wlmc}</div>
          </div>
        </div>
        <div class="ewm">
        </div>
      </div>
    </div>

  <button @click="print">模板方式打印</button>
  <lodop ref="lodopIframe2ref"></lodop>
</template>

<script setup>

import QRCode from 'qrcode';
import {ref} from 'vue'

const lodopIframe2ref = ref(null)
const print = () => {
  lodopIframe2ref.value.demoPrint(callback, 1)
}

const callback = (LODOP) => {
  let html = document.getElementById('new-print-are').outerHTML
  console.log(html);
  LODOP.SET_PRINT_PAGESIZE(2, 1050, 1450, '')  //2横向打印, 纸张设置为105mm*145mm
  LODOP.ADD_PRINT_HTM(0, 0, 300, 1100, html);

  LODOP.NEWPAGEA();
}

QRCode.toString('data', { type: 'svg' })
    .then(svg => {
      // 这里你可以将 SVG 字符串插入到 DOM 中，或者用于其他目的
      console.log(svg);
    })
    .catch(err => {
      console.error(err);
    });

QRCode.toDataURL('data')
    .then(url => {
      // 你可以将这个 URL 设置为 <img> 标签的 src 属性，或者用于其他用途
      console.log(url);
    })
    .catch(err => {
      console.error(err);
    });
</script>

<style scoped lang="scss">
.new-print-are {

  div {
    border: 1px solid black;
    box-sizing: border-box;
    font-size: 32px;
  }

  .printare {
    width: 750px;
    height: 1300px;
    padding: 20px 34px;
    border: 1px solid black;
  }

  .linehead {
    border: 2px solid black;
    border-bottom: 0px solid black;
    padding: 20px;
    font-size: 42px;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .zjll-body {
    height: 600px;
    display: flex;
    flex-direction: column;
  }

  .midclumons {
    text-align: center;
    flex: 1 1 auto;
  }

  .ewm {
    width: 650px;
    height: 562px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px;
  }

  .row {
    display: flex;
    flex: 1 1 auto;
  }

  #maincontent2 {
    width: 750px;
    scale: 50%;
  }

  .leftclumons {
    width: 200px;
    flex-shrink: 0;
  }
}
</style>